<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    >
    <meta
        http-equiv="X-UA-Compatible"
        content="ie=edge"
    >
    <title>vue.set()的使用</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>学校信息</h1>
        <h2>学校名称:{{ name }}</h2>
        <h2>学校地址:{{ address }}</h2>
        <hr />
        <h1>学生信息</h1>
        <button @click.once="addSex">添加一个性别属性,默认值是男</button>
        <h2>学生姓名:{{ stu.name }}</h2>
        <h2>学生真实年龄:{{ stu.age.rage }}</h2>
        <h2>学生对外年龄:{{ stu.age.sage}}</h2>
        <h2 v-if="stu.sex">学生性别: {{ stu.sex }}</h2>
        <h2>朋友们</h2>
        <ul
            v-for="(f, index) in stu.friends"
            :key="index"
        >
            <li>{{ f.name }} -- {{ f.age }}</li>
        </ul>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                name: '武汉科技大学',
                address: '武汉',
                stu: {
                    name: 'tom',
                    age: {
                        rage: 12,
                        sage: 29
                    },
                    friends: [
                        { name: 'Jerry', age: 23 },
                        { name: 'Jane', age: 18 }
                    ]
                }
            },
            methods: {
                addSex () {
                    //这里this === vm
                    //利用vue.set(或者vm.$set())api能够添加的属性变为响应式属性
                    //注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。
                    Vue.set(this.stu, 'sex', '男')
                    // this.$set(this.stu, 'sex', '男');
                }
            }
        })
    </script>
</body>

</html>